/**
在 Webpack 中，自定义 Loader 可以用于将 Markdown 文件（.md）转换为 HTML，并且可以为生成的 HTML 添加样式。以下是关于如何实现这个过程的总结：
  1. 什么是自定义 Loader？
  自定义 Loader 是 Webpack 中的一个功能，允许开发者创建自定义的模块处理逻辑。通过自定义 Loader，可以对文件内容进行转换和处理，以满足特定需求。

  2. 实现步骤
   1. 安装依赖
  首先，需要安装一些依赖库来帮助处理 Markdown 文件和生成 HTML。常用的库有 `marked`（将 Markdown 转换为 HTML）和 `html-loader`（处理 HTML 文件）。
  ```bash
  npm install marked html-loader --save-dev
  ```

   2. 创建自定义 Loader
  创建一个自定义 Loader 文件，例如 `md-loader.js`，用于将 Markdown 文件转换为 HTML。
  ```javascript
  // md-loader.js
  const marked = require('marked');

  module.exports = function (source) {
      // 使用 marked 将 Markdown 转换为 HTML
      const html = marked(source);

      // 返回转换后的 HTML
      return `module.exports = ${JSON.stringify(html)};`;
  };
  ```

  在这个 Loader 中，我们使用 `marked` 将 Markdown 内容转换为 HTML，并将结果以模块的形式导出。

   3. 配置 Webpack
  在 Webpack 配置文件中，添加自定义 Loader 的使用规则。

  ```javascript
  const path = require('path');

  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
      module: {
          rules: [
              {
                  test: /\.md$/, // 匹配所有 .md 文件
                  use: path.resolve(__dirname, 'md-loader.js'), // 使用自定义 Loader
              },
          ],
      },
      mode: 'production', // 设置为生产模式
  };
  ```

   4. 使用 Loader
  在 JavaScript 文件中导入 Markdown 文件并使用。

  ```javascript
  // index.js
  import markdownContent from './example.md';

  const container = document.createElement('div');
  container.innerHTML = markdownContent; // 将转换后的 HTML 插入到容器中
  document.body.appendChild(container);
  ```

  3. 添加样式
  可以通过 CSS 或其他样式处理器（如 Sass、Less）来为生成的 HTML 添加样式。只需在你的 CSS 文件中定义样式，并在 JavaScript 中导入它。

  ```css
  styles.css
  div {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
  }
  ```
  在 JavaScript 文件中导入样式：
  ```javascript
  import './styles.css';
  ```

  4. 注意事项
  - 性能: 自定义 Loader 的实现应注意性能，尽量避免复杂的计算和处理。
  - 错误处理: 在 Loader 中添加错误处理逻辑，以便在转换过程中出现错误时能够捕获并反馈。
  - Markdown 解析器: 根据需求选择合适的 Markdown 解析器，如 `marked`、`markdown-it` 等，它们的功能和配置可能有所不同。

  总结
  通过自定义 Loader，可以将 Markdown 文件转换为 HTML，并为生成的 HTML 添加样式。使用 `marked` 库进行 Markdown 解析，结合 Webpack 的配置，可以实现灵活的内容处理和样式应用。这种方法适用于需要将 Markdown 内容集成到前端应用中的场景。希望这个总结对你理解如何使用 Webpack 自定义 Loader 将 Markdown 转换为 HTML 有所帮助！
 */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: false,
  entry: "./src/main.js",
  output: {
    clean: true,
    path: path.resolve(__dirname, "./build"),
    filename: "[name]_build.js",
  },
  // resolveLoader: 解析 loader 的规则
  resolveLoader: {
    modules: ["node_modules", "./custom-loaders"], // 指定 loader 的搜索路径
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "custom-babel-loader",
        },
      },
      {
        test: /\.md$/,
        use: {
          loader: "custom-markdown-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};
